<script setup>
import {onMounted, ref} from 'vue'
import axios from 'axios';
import router from "@/router/index.js";
import { ElMessage, ElMessageBox } from 'element-plus'
import {post} from '@/net/index.js'

let interfaceInfoList = ref([]);
let userInfo = JSON.parse(localStorage.getItem('loggedUser'));
let loading = ref(true)

// 在线调用接口
const debugInterface = (id) => {
    // 跳转到接口文档页面
    router.replace({ path: '/interfaceInfo', query: { id: id,userId: userInfo.id} });
}

// 从我的接口中删除
const deleteInterface = (id) => {
    ElMessageBox.confirm(
        '确定移除此接口?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            post('/api/userInterfaceInfo/delete',
                {
                    id: id
                },
                () => {
                    ElMessage.success("删除成功！");
                    window.location.reload();
                },
                () => {
                    ElMessage.error('删除失败！');
                }
            );
        })
        .catch(() => {})
}

onMounted(() => {
    post('/api/userInterfaceInfo/list',
        {
            userId: userInfo.id,
        },
        (data) => {
            interfaceInfoList.value = data
            if (interfaceInfoList.value.length == 0) {
                loading.value = false
            }
        }
    );
});
</script>

<template>
    <div class="api-show">
        <div class="default-page" v-show="!loading">
            <img style="display: block;margin: 0 auto" width="500px" height="500px" src="../../../public/img/defaultPageIcon.png">
            <span class="default-slogan" >暂无开通的接口</span>
        </div>
        <el-row style="width: 100%" v-show="loading">
            <template v-for="(data,index) in interfaceInfoList" :key="index">
                <el-col :span="8">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <div class="interface-id-name">
                                    <span class="font-1" style="font-size: 20px">{{ data.interfaceInfo.name }}</span>
                                    <el-tag type="primary" style="margin-left: 10px">ID:{{data.id}}</el-tag>
                                </div>
                                <el-button type="danger" size="small" @click="deleteInterface(data.id)" circle>
                                    <el-icon size="20">
                                        <Close/>
                                    </el-icon>
                                </el-button>
                            </div>
                        </template>
                        <div class="font-1" style="font-size: 15px">
                            <el-row style="color: #909399">
                                <el-col :span="12">
                                    已调用次数：
                                </el-col>
                                <el-col :span="12">
                                    剩余调用次数：
                                </el-col>
                            </el-row>
                            <el-row style="color: #E6A23C;font-size: 30px;margin-top: 10px">
                                <el-col :span="12">
                                    <span v-text="data.calledNum"></span>
                                </el-col>
                                <el-col :span="12" style="color: #F56C6C">
                                    <span v-text="data.leftNum"></span>
                                </el-col>
                            </el-row>
                        </div>
                        <template #footer>
                            <div class="user-dataTag">
                                <el-button type="primary" class="font-1" style="font-size: 17px" @click="debugInterface(data.interfaceInfoId)" link>
                                    <el-icon style="color: #79bbff;margin-right: 5px" size="20">
                                        <Finished/>
                                    </el-icon>
                                    在线调用
                                </el-button>
                            </div>
                        </template>
                    </el-card>
                </el-col>
            </template>
        </el-row>
    </div>
</template>

<style scoped>
@font-face {
    font-family: "Sphere fez"; /* 定义字体名称 */
    src: url('/src/assets/font/spherefez-ezxam.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}

@font-face {
    font-family: "shangshou"; /* 定义字体名称 */
    src: url('/src/assets/font/上首简黑极细体.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}

.font-1 {
    color: #409EFF;
    font-weight: bold;
    font-family: shangshou;
}

.api-show {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-card {
    width: 500px;
    margin: 15px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 0 0 #cac6c6;
    background: #FAFCFF;
}

.box-card:hover {
    box-shadow: 0 10px 10px #cac6c6;
}

.user-dataTag {
    display: flex;
    flex-direction: row;
    justify-items: center;
}

.user-dataTag span {
    margin-left: 5px;
}

.default-page {
    width: 100%;
    height: 900px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

.default-slogan {
    display: block;
    font-family: shangshou;
    font-weight: bold;
    font-size: 60px;
    letter-spacing: 10px;
    color: #79bbff
}
</style>